<template>
  <div class="nav-menu">
    <el-menu
      class="el-menu-demo shuip"
      mode="horizontal"
      @select="handleSelect"
    >
      <menu-item
        class="shuip-item"
        v-for="(item, index) in Menus"
        :key="index"
        :datas="item"
      >
      </menu-item>
    </el-menu>
  </div>
</template>

<script>
import MenuItem from "./MenuItem.vue";
export default {
  name: "NavMenu",
  components: {
    MenuItem,
  },
  data() {
    return {
      activeIndex: 1,
      Menus: [
        { index: "1", name: "首页", parentid: "0", path: "/homepage" },
        { index: "2", name: "业务办理", parentid: "0", path: "/workcenter" },
        { index: "3", name: "一张图", parentid: "0" },
      ],
      currentIndex: 1,
    };
  },
  mounted() {
    this.$nextTick(() => {
      var xx = document.querySelectorAll(".el-menu-item");
      // xx.style.height = '68px';
      // console.log("执行了==", xx);
    });
  },
  methods: {
    clickItem(index) {
      console.log("当前点击==", index);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$bus.$emit("updateMenu", { index: key, path: keyPath });
    },
  },
};
</script>

<style scoped>
.nav-menu {
  /* margin: 20px auto; */
}
.shuip {
  /* background: gray; */
  height: 68px;
  display: flex;
  align-items: center;
}
.shuip-item {
  /* flex: 1; */
  /* line-height: 68px; */
  height: 68px;
  width: 120px;
}
</style>